import { ref , onMounted} from 'vue';
import type { Query } from '@/interface/Query';
import type { TableColumnsType } from 'ant-design-vue';
import type { Role } from "@/interface/Role"
import {operatorApi, oneIdApi, listApi, removeApi , roleMenuOperatorApi  } from "@/controller/RoleApi"
import { message } from "ant-design-vue";
import type {RoleMenu} from "@/interface/RoleMenu";

export default function () {

    onMounted(()=> {
       list();
    });

    let searchBox = ref(true);


    let queryModel = ref({
        page :  1,
        size: 15
    } as Query);


    function list() {
        listApi(queryModel.value).then( res => {
            if (res.code == 200) {
                tableData.value = res.data.records;
                total.value = parseInt(res.data.totalRow);
            }
        })
    }

    let operatorStore = ref({
        cmd: 0,
        open: false
    });
    function operator(cmd : number , id? : string) {
        operatorStore.value.cmd = cmd;
        operatorStore.value.open = true;
        if(id) {
            oneIdApi(id).then(res => {
                role.value = res.data;
            });
        }
    }

    let moduleStore = ref({
        menu: false,
        roleInfo: {} as Role,
    });

    function acceptRoleMenu(roleMenu : RoleMenu) {
        roleMenuOperatorApi(roleMenu).then(res => {
            if(res.code == 200) {
                message.success("分配成功");
            }else {
                message.error(res.msg);
            }
        });
    }

    function menuAllocate(role : Role) {
        moduleStore.value.roleInfo = role;
        moduleStore.value.menu = true;
    }

    const columns = ref<TableColumnsType>([
        {
            title: '角色名称',
            dataIndex: 'name',
            width: 200,
            align: 'center',
            fixed: 'left',
            resizable: true
        },
        {
            title: '角色描述',
            dataIndex: 'description',
            width: 200,
            align: 'center',
            resizable: true
        },
        {
            title: '权限标识',
            dataIndex: 'permissionCode',
            width: 200,
            align: 'center',
            resizable: true
        },
        {
            title: '排序',
            dataIndex: 'sortOrder',
            width: 60,
            align: "center",
            resizable: true
        },
        {
            title: '状态',
            dataIndex: 'status',
            width: 60,
            align: "center",
            resizable: true
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            width: 160,
            align: "center",
            resizable: true
        },
        {
            title: '更新时间',
            dataIndex: 'updateTime',
            width: 160,
            align: "center",
            resizable: true
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 260,
            fixed: 'right',
            align: 'center',
            resizable: true
        },
    ]);

    function handleResizeColumn(w : any, col : any) {
        col.width = w;
    }


    let roleIds = ref<string[]>([]);
    function selectData(selectedRowKeys : string[], selectedRows : Role[]) {
        roleIds.value = selectedRowKeys;
    }


    let tableData = ref([] as Role[]);

    function resetQuery() {
        queryModel.value = {
            page : 1,
            size : 15
        } as Query;
        list();
    }

    function remove(ids? : string[]) {
        if (ids) {
            removeApi(ids).then( res => {
                if (res.code == 200) {
                    message.success("删除成功");
                    roleIds.value = [];
                    list();
                }else {
                    message.error(res.msg);
                }
            });
        }else {
            removeApi(roleIds.value).then( res => {
                if (res.code == 200) {
                    message.success("删除成功");
                    roleIds.value = [];
                    list();
                }else {
                    message.error(res.msg);
                }
            });
        }
    }


    let total = ref(0);
    function pageChange(page : number,size : number) {
        queryModel.value.page = page;
        queryModel.value.size = size;
        list();
    }


    let role = ref({} as Role);

    let formRef = ref();
    function submitOperator() {
        formRef.value
            .validate()
            .then(() => {
                operatorApi(role.value).then(res => {
                    if(res.code == 200) {
                        list();
                        resetFrom();
                        message.success("新增角色成功");
                    }else {
                        message.error(res.msg);
                    }
                });
            });
    }

    function resetFrom() {
        role.value = {} as Role;
        formRef.value.resetFields();
        operatorStore.value.open = false;
    }

    const  rules = {
        name : [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
        ],
        description : [
            { required: true, message: '请输入角色描述', trigger: 'blur' },
        ],
        permissionCode : [
            { required: true, message: '请输入权限标识', trigger: 'blur' },
        ],
        sortOrder : [
            { required: true, message: '请输入排序', trigger: 'blur' },
        ]

    }

    return {
        searchBox , list , operator , queryModel , resetQuery ,
        handleResizeColumn , columns , tableData , selectData,
        pageChange , total , operatorStore , role , roleIds ,
        submitOperator , resetFrom , rules , formRef , remove ,
        menuAllocate , moduleStore , acceptRoleMenu
    }
}
